<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <title>Document</title>
  <link rel="stylesheet" href="./styles/bootstrap.min.css">
  <link rel="stylesheet" href="./styles/index.styl">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
  <script>
    (function (window, document) {
      var setRem = function () {
        var innerWidth = document.documentElement.getBoundingClientRect().width || window.innerWidth;
        if (innerWidth > 768) {
          document.documentElement.style.fontSize = 48 + 'px';
        } else {
          document.documentElement.style.fontSize = innerWidth / 15 + 'px';
        }
      };
      window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', setRem, false);
      setRem();
    })(window, document);
  </script>
</head>

<body>
  <div class="wrapper-main-content" id="app">
    <!-- header -->
    <div class="header">
      <!-- <img src="./images/header_1.jpg" alt=""> -->
    </div>
    <!-- 全免购置税v -->
    <div class="product">
      <div class="h1-title">豪华有WEY VV7全免购置税 热销20万 两周年感恩回馈</div>
      <div class="sub-title">VV7 —— 感恩回馈 购车尊享全免购置税</div>
      <div class="product-row clearfix">
        <div class="product-row-item"><img src="./images/product_1.png" alt=""></div>
        <div class="product-row-item"><img src="./images/product_2.png" alt=""></div>
      </div>
      <div class="product-row clearfix">
        <div class="product-row-item"><img src="./images/product_3.png" alt=""></div>
        <div class="product-row-item"><img src="./images/product_4.png" alt=""></div>
      </div>
      <div class="time"></div>
    </div>
    <!-- 预约试驾 -->
    <div class="reservation">
      <!-- <input @change="add" type="text" v-model.trim="name"> -->
      <form @submit.prevent="onSubmit">
        <div class="grounp-item">
          <div class="title">姓&nbsp;&nbsp;&nbsp;&nbsp;名</div>
          <input class="input" type="text" placeholder="点击填写您的姓名" v-model.trim="name" maxlength="30">
        </div>
        <div class="grounp-item">
          <div class="title">联系方式</div>
          <input class="input" type="number" placeholder="点击填写您的电话号码" v-model.number="tel" maxlength="11">
        </div>
        <div class="grounp-item">
          <div class="min-grounp-item">
            <div class="title">省&nbsp;&nbsp;&nbsp;&nbsp;份</div>
            <select class="select">
              <option v-for="option in options" v-bind:value="option">
                {{ option }}
              </option>
            </select>
          </div>
          <div class="min-grounp-item">
            <div class="title">城&nbsp;&nbsp;&nbsp;&nbsp;市</div>
            <select class="select">
              <option v-for="option in options" v-bind:value="option">
                {{ option }}
              </option>
            </select>
          </div>
        </div>
        <div class="grounp-item">
          <div class="title">经销商</div>
          <select class="select">
            <option v-for="option in options" v-bind:value="option">
              {{ option }}
            </option>
          </select>
        </div>
        <div class="protocol">
          <label>
            <div class="check"></div>
            <input type="checkbox" v-model="name">
            我已阅读并接受隐私条款：  
          </label>
          <p>您的个人资料有可能会提交至WEY厂商及其授权经销商，<br> 与您进一步沟通试驾、购车等事宜。</p>
        </div>
      </form>
    </div>
  </div>
  <script>
    var $vue = new Vue({
      el: "#app",
      data: {
        name: true,
        tel: '',
        options: [
          'a',
          'b',
          'c'
        ]
      },
      methods: {
        onSubmit() {
          console.log(this.name)
        }
      }
    })
  </script>
</body>

</html>